<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker v-model="query.start" style="width:150px;" format="yyyy-MM-dd" type="datetime" placeholder="开始日期" />
      <el-date-picker v-model="query.end" style="width:150px;" format="yyyy-MM-dd" type="datetime" placeholder="结束日期" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter" style="margin-top:8px;">
        查询
      </el-button>
    </div>


    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;"  >
      <el-table-column label="姓名" align="center" width="120" >
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
     
    
      <el-table-column label="M0" align="center" >
          <el-table-column label="总量" align="center" >
            <template slot-scope="{row}">
              <span >{{ row.m.count.m0_count}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已跟进" align="center" >
            <template slot-scope="{row}">
              <span >{{ row.m.recordcount.m0_count}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已还" align="center">
            <template slot-scope="{row}">
              <span >{{ row.m.paids.m0_count}}</span>
            </template>
          </el-table-column>       
      </el-table-column>
      <el-table-column label="M1" align="center" >
          <el-table-column label="总量" align="center" >
            <template slot-scope="{row}">
              <span >{{ row.m.count.m1_count}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已跟进" align="center" >
            <template slot-scope="{row}">
              <span >{{ row.m.recordcount.m1_count}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已还" align="center">
            <template slot-scope="{row}">
              <span >{{ row.m.paids.m1_count}}</span>
            </template>
          </el-table-column>       
      </el-table-column>
      <el-table-column label="M2" align="center" >
          <el-table-column label="总量" align="center" >
            <template slot-scope="{row}">
              <span >{{ row.m.count.m2_count}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已跟进" align="center" >
            <template slot-scope="{row}">
              <span >{{ row.m.recordcount.m2_count}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已还" align="center">
            <template slot-scope="{row}">
              <span >{{ row.m.paids.m2_count}}</span>
            </template>
          </el-table-column>       
      </el-table-column>
      <el-table-column label="M3" align="center" >
          <el-table-column label="总量" align="center" >
            <template slot-scope="{row}">
              <span >{{ row.m.count.m3_count}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已跟进" align="center" >
            <template slot-scope="{row}">
              <span >{{ row.m.recordcount.m3_count}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已还" align="center">
            <template slot-scope="{row}">
              <span >{{ row.m.paids.m3_count}}</span>
            </template>
          </el-table-column>       
      </el-table-column>
      <el-table-column label="M3+" align="center" >
          <el-table-column label="总量" align="center" >
            <template slot-scope="{row}">
              <span >{{ row.m.count.m4_count}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已跟进" align="center" >
            <template slot-scope="{row}">
              <span >{{ row.m.recordcount.m4_count}}</span>
            </template>
          </el-table-column>
          <el-table-column label="已还" align="center">
            <template slot-scope="{row}">
              <span >{{ row.m.paids.m4_count}}</span>
            </template>
          </el-table-column>       
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button size="mini" type="primary" @click="distribution(row)">
            订单分配
          </el-button>
        </template>
      </el-table-column>

    
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getList" />
  
    <el-dialog :visible.sync="dialogFormVisible" title="M3+订单分配" :before-close="closeDialog">
      <template>
        <el-transfer
          filterable
          :filter-method="filterMethod"
          filter-placeholder="请输入客户姓名"
          v-model="choose"
          :titles="title"
          target-order="unshift"
          :data="order_data">
        </el-transfer>
      </template> 
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">
          取消
        </el-button>
        <el-button type="primary" @click="transferToAdmin()">
          确定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getOrderPaymentOverList,
    transferToAdmin,
    collectorManager
  } from '@/api/collection'
  import {
    getAllList
  } from '@/api/user'
  import {
    formatDate
  } from '@/utils/formatDate.js'
  import waves from '@/directive/waves' // waves directive
  import {
    parseTime
  } from '@/utils'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'NormalTable',
    components: {
      Pagination
    },
    directives: {
      waves
    },
    data() {
      return {
        list:[],
        title:['其他', '张龙'],
        tableKey: 0,
        listRecordLoading: true,
        recordTotal: 0,
        total: 0,
        query:{
          page:1,
          limit:10,
          role_id:8,
          start:'',
          end:''
        },
        collector:'',
        dialogFormVisible:false,
        orderQuery: {
          overdue:4,
          page:1,
          limit:1000
        },
        order_data:[],
        user_data:[],
        choose:[],
        filterMethod(query, item) {
          return item.search.indexOf(query) > -1;
        }
      }
    },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      collectorManager(this.query).then(response => {
          this.list = response.data;
          this.listLoading = false;
      })
    },
    distribution(row){
        this.dialogFormVisible = true;
        this.getOrderPaymentOverList(row);
    },
    handleFilter() {
      this.query.page = 1
      this.getList()
    },
    transferToAdmin(){
      let param = {collector:this.collector}
      if(this.choose.length==0){
        this.$notify({
          title: '提示',
          message: '请选择订单',
          type: 'warning',
          duration:2000
        });
        return;
      }
      param.choose = this.choose
      transferToAdmin(param).then(res => {
        this.listLoading = false
        if(res.code==200){
          this.$notify({
            title: '提示',
            message: '完成',
            type: 'success',
            duration:2000
          });
          this.closeDialog();
          this.getList()
        }
        
      })
    },
    closeDialog(){
      this.dialogFormVisible = false;
      this.order_data = [];
      this.choose = [];
    },
    getOrderPaymentOverList(row) {
      this.collector = row.id;
      this.orderQuery.collector = row.id;
      this.title = ['其他', row.name];
      this.listLoading = true
      getOrderPaymentOverList(this.orderQuery).then(response => {
        let others = response.data.others
        if(others.length>0){
          for(let i=0;i<others.length;i++){
            this.order_data.push({
              label: others[i].real_name,
              key: others[i].order_id,
              search: others[i].real_name
            })
          }
        }
        this.listLoading = false
      })
    },
  }
}
</script>
  

